<template>
    <view class="content" >
        <view class="pnz_eliminating_wrap">
            <view class="nav">
                <view class="navTop">
                    <view class="navTop-left">
                        关卡<text>{{currentLevel}}</text>
                        <text v-if="currentLevel == 1">-一星级</text>
                        <text v-if="currentLevel == 2">-二星级</text>
                        <text v-if="currentLevel == 3">-三星级</text>
                        <text v-if="currentLevel == 4">-四星级</text>
                        <text v-if="currentLevel == 5">-五星级</text>
                    </view>
                    <view class="navTop-right">
                        目标分<text>{{targetScore}}</text>
                    </view>
                </view>

                <view class="navBot">
                    <view class="navBot-top">
                        {{integral}}
                    </view>
                    <view class="navBot-box">
                        <view class="navBot-box-inner" :style="[{ width: ((integral/targetScore)*100) + '%'}]"></view>
                    </view>
                </view>

            </view>
            <view class="pnz_panel_wrap" @click="clickEvent">
                <view v-for="(item,index) in all_data" :key="index" class="single_line">
                    <view class="single_cell  star_base" :style="[singleCellStyle(single_item)]"
                        :class="[singleCellClass(single_item)]" v-for="(single_item,single_index) in item"
                        :key="single_index">
                    </view>
                </view>
            </view>
            <view class="resetting">
                <view class="resetting-right" @click="resetting(2)">
                    重开
                </view>
            </view>
            <view class="rule-txt">
                <view class="rule-txt-title">
                    规则:
                </view>
                <view class="rule-txt-desc">
                    1、如果有三个以上同颜色的动物在一条线上，则点击其中一个即可将这三个动物及周边的同颜色动物消除。
                </view>
                <view class="rule-txt-desc">
                    2、如果有色块与相邻色块互换后可形成三个以上同颜色的动物在一条线上，先点击一个确认，再点击另一个可进行互换后则会自动消除。
                </view>
                <view class="rule-txt-desc">
                    3、最高等级为五星级。
                </view>
            </view>
        </view>
    </view>

</template>

<script>
    export default {
        data() {
            return {
                all_data: [],
                star_total: 6,
                panel: {
                    x: 8,
                    y: 8
                },
                cell_length: 31, //默认尺寸
                current_clicked_item: null, //当前已经选中的棋子
                is_blinking: false,
                currentLevel: 1, // 关卡
                targetScore: 100, // 目标分数
                integral: 0, //当前积分
            };
        },
        watch: {
           
        },
        mounted() {
            this.init()
        },
        methods: {
            resetting() {
                let that = this;
                uni.showModal({
                    title: '提示',
                    content: '是否确认清除当前积分并重新开局？',
                    confirmText: '确定',
                    success: function(res) {
                        if (res.confirm) {
                            that.init()
                            that.integral = 0;
                        } else if (res.cancel) {
                            // console.log('点击取消');
                        }
                    }
                });
            },
            init() {
                this.initAllData()
            },
            getDefaultItem(x, y) {
                return {
                    x: x,
                    y: y,
                    star_num: (parseInt(Math.random() * this.star_total) + 1),
                    is_deleted: false,
                    is_selected: false
                }
            },
            initAllData() {
                this.all_data = []
                //获得数据
                for (var j = 0; j < this.panel.y; j++) {
                    var temp_line = []
                    for (var i = 0; i < this.panel.x; i++) {
                        temp_line.push(
                            this.getDefaultItem(i, j)
                        );
                    }
                    this.all_data.push(temp_line)
                }
                //   todo 先清理下所有相同的点
            },
            markMatrixDeletedTag(all_matrix) {
                var temp_matrix = JSON.parse(JSON.stringify(all_matrix));
                for (var y in temp_matrix) {
                    for (var x in temp_matrix[y]) {

                    }
                }
            },
            singleCellStyle(single_item) {
                return {
                    width: this.cell_length + "px",
                    height: this.cell_length + "px"
                }
            },
            singleCellClass(single_item) {
                var dest_class = "";
                dest_class += "star" + single_item.star_num
                if (single_item.is_selected) {
                    dest_class += " selected";
                }
                if (single_item.is_deleted) {
                    dest_class += " deleted";
                }
                return dest_class;
            },
            itemSelected(now_item) {
                if (this.current_clicked_item) {
                    this.$set(this.current_clicked_item, 'is_selected', false);
                }

                this.current_clicked_item = now_item;
                this.$set(now_item, 'is_selected', true);
                //    再算出可以到的点
            },
            checkCanEliminateAndClear() {
                this.$set(this.current_clicked_item, 'is_selected', false);
                this.current_clicked_item = null;
                this.is_blinking = true;
                setTimeout(() => {
                    //查下是否有同样的点
                    this.clearMatrixAndAddSupplement(this.all_data);
                    this.is_blinking = false;
                }, 750)
            },

            clickEvent(e) {
                if (this.is_blinking) {
                    return false;
                }
                var offset_x = e.detail.x - e.currentTarget.offsetLeft;
                var offset_y = e.detail.y - e.currentTarget.offsetTop;
                // 算出 x的 index
                var x_index = this.getLengthIndex(offset_x)
                var y_index = this.getLengthIndex(offset_y)
                console.log(y_index, x_index)
                var now_item = this.all_data[y_index][x_index]
                if (!this.current_clicked_item) {
                    //不存在，则是第一次点
                    this.itemSelected(now_item);
                    var res = this.checkIfCanEliminating(now_item, this.all_data);
                    if (res) {
                        this.checkCanEliminateAndClear()
                    } // //查下是否有同样的点
                    return false;
                } else {
                    console.log(" 点过了 -------- ")
                    //    已经点过了，如果与上一个是同一个 num 则换点
                    if (now_item.star_num === this.current_clicked_item.star_num) {
                        this.itemSelected(now_item);
                        var res = this.checkIfCanEliminating(now_item, this.all_data);
                        if (res) {
                            this.checkCanEliminateAndClear()
                        }
                        return false;
                    }
                    //    如果不是当前的子的前，后，左，右，则重新选子
                    var is_next_to = false;
                    [
                        [this.current_clicked_item.x - 1, this.current_clicked_item.y],
                        [this.current_clicked_item.x + 1, this.current_clicked_item.y],
                        [this.current_clicked_item.x, this.current_clicked_item.y - 1],
                        [this.current_clicked_item.x, this.current_clicked_item.y + 1],
                    ].forEach((v) => {
                        if (now_item.x === v[0] && now_item.y === v[1]) {
                            is_next_to = true;
                        }
                    })
                    if (!is_next_to) {
                        //    不是紧临，则是 重新再换一个目标
                        this.itemSelected(now_item)
                    } else {
                        //    是紧临，则看下四方是否可以有可以消的
                        //换下 x,y,再看下有没有可以消的，如果两个结局有一个有值 ，则换，并把这些换掉
                        var new_matrix = this.getNewMatrix(this.current_clicked_item, now_item, this.all_data);
                        var temp_now_arr = this.checkIfCanEliminating(new_matrix[now_item.y][now_item.x], new_matrix);
                        var temp_from_arr = this.checkIfCanEliminating(new_matrix[this.current_clicked_item.y][this
                            .current_clicked_item.x
                        ], new_matrix);
                        if (!temp_now_arr && !temp_from_arr) {
                            //    两个都为空，则不能移动
                            console.log('不能移动')
                            // this.$set(this.current_clicked_item,'is_selected',false);
                            return this.itemSelected(now_item)
                        } else {
                            console.log("要删了");
                            this.$set(this, 'all_data', new_matrix);
                            this.checkCanEliminateAndClear()
                        }
                    }
                }
            },
            clearMatrixAndAddSupplement(all_matrix) {
                //    清理盘中所有要删除的格子,并补充
                let that = this;
                var temp_matrix = JSON.parse(JSON.stringify(all_matrix));
                for (var x = 0; x <= this.panel.x - 1; x++) {
                    //每一个纵列单独查
                    var temp_column = [];
                    var y = this.panel.y - 1;
                    while (y >= 0) {
                        if (!temp_matrix[y][x].is_deleted) {
                            temp_column.push(temp_matrix[y][x]);
                        }
                        y--;
                    }
                    // temp_column 补齐
                    var i = 0;
                    while (i <= this.panel.y - 1) {
                        if (!temp_column[i]) {
                            temp_column[i] = this.getDefaultItem(x, i)
                            this.integral += 1;
                        }
                        i++;
                    }
                    y = this.panel.y - 1;
                    while (y >= 0) {
                        if (temp_column[this.panel.y - 1 - y]) {
                            temp_matrix[y][x] = Object.assign({}, temp_column[this.panel.y - 1 - y], {
                                y: y,
                                x: x
                            })
                        } else {
                            //    没有，则是新生成的一个随机的
                            temp_matrix[y][x] = this.getDefaultItem(x, y)
                        }
                        y--;
                    }
                }
                this.$set(this, 'all_data', temp_matrix);
                
                console.log('this.integral',this.integral)
                if(this.currentLevel == 1){
                    if(this.integral >= this.targetScore){
                        uni.showModal({
                            title: '关卡2-二星级',
                            showCancel:false,
                            content: '当前得分'+ that.integral,
                            confirmText: '下一关',
                            success: function(res) {
                                if (res.confirm) {
                                    // console.log('用户点击确定');
                                    that.integral = 0;
                                    that.currentLevel = 2;
                                    that.targetScore = 299; // 目标分数
                                    that.panel.x = 9;
                                    that.panel.y = 9;
                                    that.init()
                                } else if (res.cancel) {
                                    // console.log('用户点击取消');
                                }
                            }
                        });
                    }
                }
                if(this.currentLevel == 2){
                    if(this.integral >= this.targetScore){
                        uni.showModal({
                            title: '关卡3-三星级',
                            showCancel:false,
                            content: '当前得分'+ that.integral,
                            confirmText: '下一关',
                            success: function(res) {
                                if (res.confirm) {
                                    // console.log('用户点击确定');
                                    that.integral = 0;
                                    that.currentLevel = 3;
                                    that.targetScore = 599; // 目标分数
                                    that.panel.x = 10;
                                    that.panel.y = 10;
                                    that.init()
                                } else if (res.cancel) {
                                    // console.log('用户点击取消');
                                }
                            }
                        });
                    }
                }
                if(this.currentLevel == 3){
                    if(this.integral >= this.targetScore){
                        uni.showModal({
                            title: '关卡4-四星级',
                            showCancel:false,
                            content: '当前得分'+ that.integral,
                            confirmText: '下一关',
                            success: function(res) {
                                if (res.confirm) {
                                    // console.log('用户点击确定');
                                    that.integral = 0;
                                    that.currentLevel = 4;
                                    that.targetScore = 999; // 目标分数
                                    that.panel.x = 11;
                                    that.panel.y = 11;
                                    that.init()
                                } else if (res.cancel) {
                                    // console.log('用户点击取消');
                                }
                            }
                        });
                    }
                }
                if(this.currentLevel == 4){
                    if(this.integral >= this.targetScore){
                        uni.showModal({
                            title: '关卡5-五星级',
                            showCancel:false,
                            content: '当前得分'+ that.integral,
                            confirmText: '下一关',
                            success: function(res) {
                                if (res.confirm) {
                                    // console.log('用户点击确定');
                                    that.integral = 0;
                                    that.currentLevel = 5;
                                    that.targetScore = 1999; // 目标分数
                                    that.panel.x = 12;
                                    that.panel.y = 12;
                                    that.init()
                                } else if (res.cancel) {
                                    // console.log('用户点击取消');
                                }
                            }
                        });
                    }
                }
                
                if(this.currentLevel == 5){
                    if(this.integral >= this.targetScore){
                        uni.showModal({
                            title: '您已通过五星级，前无古人后无来者！',
                            showCancel:false,
                            content: '当前得分'+ that.integral,
                            confirmText: '确定',
                            success: function(res) {
                                if (res.confirm) {
                                    // console.log('用户点击确定');
                                    
                                } else if (res.cancel) {
                                    // console.log('用户点击取消');
                                }
                            }
                        });
                    }
                }
                return temp_matrix;
            },
            getNewMatrix(from_obj, to_obj, all_matrix) {
                var new_matrix = JSON.parse(JSON.stringify(all_matrix));
                var temp_to_item = Object.assign({}, from_obj, {
                    x: to_obj.x,
                    y: to_obj.y,
                    is_selected: false,
                })
                var temp_from_item = Object.assign({}, to_obj, {
                    x: from_obj.x,
                    y: from_obj.y,
                    is_selected: false,
                })
                new_matrix[to_obj.y][to_obj.x] = temp_to_item;
                new_matrix[from_obj.y][from_obj.x] = temp_from_item;
                return new_matrix;
            },
            getItemOrNull(y, x, all_matrix) {
                if (x >= 0 && x <= this.panel.x - 1 && y >= 0 && y <= this.panel.y - 1) {
                    //区域内
                    return all_matrix[y][x];
                } else {
                    return null;
                }
            },
            getNextToSameArr(now_item, all_matrix, is_getting_extra = false) {
                var lx, rx, x, ly, ry, y;
                lx = rx = x = now_item.x;
                ly = ry = y = now_item.y;
                var dest_arr = [];
                var logicFun = (y, x, now_item) => {
                    var temp_item = this.getItemOrNull(y, x, all_matrix);
                    //有值才查
                    if (temp_item && temp_item.star_num === now_item.star_num) {
                        if (!temp_item.is_deleted) {
                            dest_arr.push(temp_item);
                        }
                    } else {
                        return false;
                    }
                }
                var break_flag;
                while (lx > 0) {
                    lx--;
                    break_flag = logicFun(y, lx, now_item);
                    if (break_flag === false) {
                        break;
                    }
                }
                while (rx < this.panel.x - 1) {
                    rx++;
                    break_flag = logicFun(y, rx, now_item);
                    if (break_flag === false) {
                        break;
                    }
                }
                while (ly < this.panel.y - 1) {
                    ly++;
                    break_flag = logicFun(ly, x, now_item);
                    if (break_flag === false) {
                        break;
                    }
                }
                while (ry > 0) {
                    ry--;
                    break_flag = logicFun(ry, x, now_item);
                    if (break_flag === false) {
                        break;
                    }
                }
                if (is_getting_extra) {
                    //    如果要加入额外的 另外处理
                    if (dest_arr.length) {
                        dest_arr.forEach((v) => {
                            all_matrix[v.y][v.x].is_deleted = true;
                        })
                        var temp_arr = []
                        dest_arr.forEach((v) => {
                            var new_arr = this.getNextToSameArr(v, all_matrix, true)
                            temp_arr = temp_arr.concat(new_arr)
                        })
                        dest_arr = temp_arr.concat(dest_arr);
                    }
                    return dest_arr;
                } else {
                    //    首次，则先判断够不够格
                    if (dest_arr.length < 2) {
                        return false;
                    } else if (dest_arr.length === 2) {
                        if (dest_arr[0].x !== dest_arr[1].x && dest_arr[0].y !== dest_arr[1].y) {
                            //    两个都不一样，不是一条线，返回 false
                            return false;
                        }
                    }
                    //走到此处就是够格了
                    //先把这些 dest_arr 中标记为删除
                    dest_arr.forEach((v) => {
                        all_matrix[v.y][v.x].is_deleted = true;
                    })
                    all_matrix[now_item.y][now_item.x].is_deleted = true;
                    var extra_new_arr = []
                    //    再查下其他的点四周是否有
                    dest_arr.forEach((v) => {
                        var new_arr = this.getNextToSameArr(v, all_matrix, true);
                        extra_new_arr.concat(new_arr);
                    })
                    dest_arr = dest_arr.concat(extra_new_arr);
                    dest_arr.push(all_matrix[now_item.y][now_item.x])
                    return dest_arr;
                }
            },
            checkIfCanEliminating(now_item, all_matrix) {
                return this.getNextToSameArr(now_item, all_matrix);
            },
            getLengthIndex(offset_length) {
                // 算出 x的 index
                var index = 0;
                if (offset_length > 0) {
                    index = parseInt(offset_length / this.cell_length);
                }
                return index;
            },
        }
    }
</script>

<style lang="scss" scoped>
    body {
        cursor: pointer;
    }

    .content {
        width: 750rpx;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #fff;
    }

    .pnz_eliminating_wrap {
        text-align: center;
        overflow: auto;

        .nav {
            width: 100%;
            overflow: auto;

            .navTop {
                width: 100%;
                font-size: 36rpx;
                color: #666;
                overflow: auto;
                padding: 10rpx 0 0 44rpx;

                .navTop-left {
                    float: left;

                    text {
                        color: #feaa18;
                    }

                    margin-right: 50rpx;
                }

                .navTop-right {
                    float: left;

                    text {
                        color: #feaa18;
                    }
                }
            }

            .navBot {
                width: 100%;
                overflow: auto;
                padding-top: 12rpx;

                .navBot-top {
                    width: 100%;
                    font-size: 48rpx;
                }

                .navBot-box {
                    width: 490rpx;
                    background-color: #fff;
                    border-radius: 20rpx;
                    overflow: hidden;
                    border: 2rpx solid #e0e0e0;
                    margin: 8rpx auto 40rpx;

                    .navBot-box-inner {
                        height: 22rpx;
                        width: 75%;
                        background: #feaa18;
                        border-radius: 20rpx 0px 0px 20rpx;
                    }
                }
            }
        }
    }

    .rule-txt {
        width: 100%;
        padding: 30rpx;
        box-sizing: border-box;
        text-align: left;

    }

    .rule-txt-title {
        font-weight: bold;
        font-size: 32rpx;
        margin-bottom: 30rpx;
        margin-top: 60rpx;
    }

    .rule-txt-desc {
        font-size: 26rpx;
        margin-bottom: 20rpx;
    }

    .pnz_panel_wrap {
        display: inline-flex;
        border: 1px solid #bbb;
        flex-direction: column;
        box-sizing: border-box;
        position: relative;
        background: #eee;

    }

    .resetting {
        width: 100%;
        padding: 40rpx;
        overflow: auto;


        .resetting-right {
            width: 200rpx;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            font-size: 28rpx;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFF;
            background: #50506f;
            border-radius: 16rpx;
            margin: 0 auto;
        }
    }

    .single_line {
        display: flex;
        justify-content: center;
        box-sizing: border-box;
    }

    .single_cell {
        border: 1px solid #bbb;
        box-sizing: border-box;
    }

    $length : 30px;

    .star_base {
        padding: 2px;
        //background: #ddd;
        background-image: url("");
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    .star_base.selected {
        border: 3px solid #444;
        opacity: 0.6;
    }

    @keyframes blink {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    .star_base.deleted {
        //background: #dddddd;
        //box-shadow: none;
        animation: blink 0.2s linear infinite;
    }

    .star1 {
        // background-image: url(../static/xiaoxiao/01.jpg);
        background-image: url("");
        
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
    }

    .star2 {
        // box-shadow: 0 0 $length inset #2b2bf8;
        
         background-image: url("");
         
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
    }

    .star3 {
        // box-shadow: 0 0 $length inset #658c05;
        background-image: url("");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
    }

    .star4 {
        // box-shadow: 0 0 $length inset #7e117c;
        background-image: url("");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;

    }

    .star5 {
        // box-shadow: 0 0 $length inset deeppink;
        background-image: url("");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
    }

    .star6 {
        // box-shadow: 0 0 $length inset #058494;
        background-image: url("");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
    }

    .star7 {
        box-shadow: 0 0 $length inset #bb7b07;
    }
</style>